<template>

  <!-- %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-->
  <!--                    界面3特有的短信登陆部分，css放login-3.css里面-->
  <section class="login-email">
    <form>
      <div class="login-phone-item">
        <!--                        <label class="lname-way"></label>-->
        <!--                            表单-->
        <select class="login-phone">
          <option class="phone-option">+86</option>
          <!--          <option class="phone-option">+100</option>-->
          <!--          <option class="phone-other">其他</option>-->
        </select>
        <!--                            这里用了login-2.css和login-3.css里面都有的类名login-info，属性相同-->
        <!--                            单独设置login-info-number，login-info-code类名调整-->
        <input class="login-info login-info-number" type="text" placeholder="请输入手机号码" v-model="phone">
      </div>
      <div class="login-validation">
        <input class="login-info login-info-code" type="text" placeholder="请输入验证码" v-model="code">
        <span @click="sendPhoneCode">获取验证码</span>
      </div>
    </form>
    <p class="forget-password">忘记密码?</p>
    <!--                    这里直接用login-2.css中login-treaty类名属性，节省代码-->
    <div class="login-treaty">
      <input type="checkbox" name="scales" id="checkbox" v-model="checked"/>
      <label for="scales">我已阅读并同意<span>《用户协议》</span>和<span>《隐私政策》</span></label>
    </div>
    <input type="button" class="login-button" value="登录" @click="phoneCodeLogin">
  </section>

</template>

<script setup>

import {ref} from "vue";
import {sendPhoneCheckCode} from "../../../api/ToolApi.js";
import {ElMessage} from "element-plus";
import {userLoginByPhoneCode} from "../../../api/UserApi.js";
import {pageStore} from "../../../store/page.js";

const page_store = pageStore()

const phone = ref('')

const code = ref('')

const checked = ref(false)

const sendPhoneCode = async () => {
  const res = await sendPhoneCheckCode(phone.value)
  if (res.code === 200) {
    ElMessage({
      message: '发送成功',
      type: 'success',
    })
  }
}

const phoneCodeLogin = async () => {

  if (!checked.value) {
    ElMessage({
      showClose: true,
      message: '请同意《用户协议》与《隐私政策》',
      type: 'warning',
    })
    return
  }

  const res = await userLoginByPhoneCode(phone.value,code.value)
  if (res.code === 200) {
    localStorage.setItem('token',res.data.token)
    localStorage.setItem('expireTime',res.data.expireTime)
    localStorage.setItem('userLoginInfo',JSON.stringify(res.data.userLoginInfoVo))
    page_store.setLoginPageStatus(false)
    location.reload()
  }
}

</script>

<style scoped>
/*界面3特有的短信登陆部分*/
.login-email {
  width: 25rem;
  margin: 0 auto;
}

.login-phone-item {
  /*display: flex;*/
  /*background-color: green;*/
  margin-top: 5.5rem;
  position: relative;
}

.login-phone {
  width: 5.5rem;
  height: 3rem;
  margin-top: 0.5rem;
  /*vertical-align: middle;*/
  color: rgba(128, 128, 128, 1);
  border-radius: 0;
  border: none;
  position: absolute;
  left: 2%;
  /*top:0%;*/
}

.phone-option {
  background-color: transparent;
  color: black;
  background-color: #CCCCCC;
}

.phone-other {
  color: black;
  width: 5rem;
}

.login-info {
  /*background-color: yellow;*/
  width: 25rem;
  height: 4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 5px;
  outline: 0;
  padding: 0 2rem;
  letter-spacing: 1px;
  border: 1px solid rgba(229, 229, 229, 1);
}

.login-info:not(:first-child) {
  /*margin-top: 2rem;*/
}

.login-info-number {
  padding-left: 8rem;
}

.login-validation {
  margin-top: 2rem;
  height: 4rem;
  position: relative;
}

.login-info-code {
  padding-left: 1rem;
}

.login-validation span {
  height: 1rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
  font-size: 1.4rem;
  color: rgba(156, 0, 0, 1);
}

.forget-password {
  color: rgba(166, 166, 166, 1);
  font-size: 1rem;
  margin-top: 1rem;
}

.forget-password {
  letter-spacing: 1px;
  line-height: 1rem;
  text-align: right;
}

.login-treaty {
  color: rgba(0, 0, 0, 1);
  font-size: 1.1rem;
  margin-top: 1rem;
  position: relative;
}

.login-treaty input {
  position: absolute;
  top: 15%;
  left: 0;
}

.login-treaty label {
  margin-left: 2rem;
}

.login-treaty label span {
  color: rgba(156, 0, 0, 1);
}

.login-button {
  width: 25rem;
  height: 4rem;
  text-align: center;
  line-height: 4rem;
  background: rgba(156, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
  font-weight: bold;
  font-size: 1.6rem;
  cursor: pointer;
  border: 0;
  border-radius: 2rem;
  margin-top: 3.5rem;
}

</style>
